<%@ page language="java" contentType="text/html;  charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>论坛员工信息</title>
<link  rel="stylesheet"  href="layui/css/layui.css"  media="all">
    <script type="text/javascript" src="myoa/scripts/layui/layui.js" charset="utf-8"></script>
    <script src="myoa/scripts/js/jquery-2.1.1.min.js"></script>
    <script src="myoa/scripts/js/vue.min.js"></script>
    <script src="myoa/scripts/js/vue.js"></script>
</head>
<style>
	
</style>
<body>
<div id="mai">
	<h4 style="margin: 30px;"><a href="myoa/bbs.jsp">内部论坛</a>>论坛用户信息<div id="nowtime" style="float:right;"></div></h4>
	<input type=hidden value="<%=request.getParameter("userid")%>" id="userid">
	
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"
			style="margin: 30px;">
			<div >
				<img src="">
			</div>
			<ul class="layui-tab-title">
				<li class="layui-this">最近发帖</li>
				<li>最近回帖</li>
			</ul> 
			<div class="layui-tab-content" >
				<!-- 最近发帖管理 --> 
				<div class="layui-tab-item layui-show"">
					<table class="layui-table" lay-skin="nob" style="width:500px;">
						<colgroup>
							<col width="100">
							<col width="200">
							<col width="200">
						</colgroup>
						<thead>
							<tr>	
								<th>发帖人</th>
								<th>标题</th>
								<th>发帖时间</th>
							</tr>
						</thead>
						<thead>
							<tr v-for="b in blist">
								<td><a href="../showbbs?bid={{userid}}">{{b.bbs_name}}</a></td>
								<td ><a href="showbbs?bid={{b.bbs_id}}">{{b.bbs_title}}</a></td>
								<td>{{b.bbs_time}}</td>
							</tr>
						</thead>
					</table>
					<div id="fenye"></div>
				</div>
				<!-- 最近回帖管理 -->
				<div class="layui-tab-item" >
					<table class="layui-table" lay-skin="nob" style="width:800px;">
						<colgroup>
							<col width="100">
							<col width="100">
							<col width="400">
						</colgroup>
						<thead>
							<tr>	
								<th>发帖人</th>
								<th>标题</th>
								<th>发帖时间</th>
							</tr>
						</thead>
						<thead>
							<tr v-for="r in rlist">
								<td>{{r.rebbs_name}}</td>
								<td>{{r.rebbs_content}}</a></td>
								<td>{{r.rebbs_time}}</td>
							</tr>
						</thead>
					</table>
					<div id="fenye1"></div>
				</div>

			</div>
	</div>
</div>

<script>
$(function(){
	
	var vue=new Vue({
		el:'#mai',
		data:{
			blist:'',
			rlist:'',
		},
		methods:{
			//查询bbs信息
			queryUserBBS:function(curr){
				var userid=$("#userid").val();
				console.log(userid);
				$.ajax({
					url:'queryUserBBS',
					type:'post',
					data:{curr:curr,userid:userid},
					dataType:'json',
					success:function(result){
						console.log(result);
						vue.blist=result.blist;
						
						layui.use(['laypage', 'layer'], function(){		//layPage的固定格式，分页
							var laypage = layui.laypage,
							layer = layui.layer;
							laypage.render({
								elem:'fenye',			//作用域	
								curr:curr,				//当前页
								count:result.total,		//获取总数	
								limit:4,  				//获取每页显示 
								layout: ['count', 'prev', 'page', 'next', 'skip'], 
								jump:function(obj,first){
									console.log(".............");
									if(!first){
										vue.queryUserBBS(obj.curr);
									}
								}
							})
						});
					}
				})
			}, 
			//查询用户回帖信息
			queryUserReply:function(curr){
				var userid=$("#userid").val();
				console.log(userid);
				$.ajax({
					url:'queryUserReply',
					type:'post',
					data:{curr:curr,userid:userid},
					dataType:'json',
					success:function(result){
						console.log(result);
						vue.rlist=result.rlist;
						
						layui.use(['laypage', 'layer'], function(){		//layPage的固定格式，分页
							var laypage = layui.laypage,
							layer = layui.layer;
							laypage.render({
								elem:'fenye1',			//作用域	
								curr:curr,				//当前页
								count:result.total,		//获取总数	
								limit:4,  				//获取每页显示 
								layout: ['count', 'prev', 'page', 'next', 'skip'], 
								jump:function(obj,first){
									console.log(".............");
									if(!first){
										vue.queryUserReply(obj.curr);
									}
								}
							})
						});
					}
				})
			},
			/* queryUser:function(userid){
				var userid=$("#userid").val();
				$.ajax({
					url:'queryUser',
					type:'post',
					data:{curr:curr,userid:userid},
					dataType:'json',
					success:function(result){
						console.log(result);
					}
				})
			} */
			
			
		}
	})
	vue.queryUserBBS(1);
	vue.queryUserReply(1);
});
layui.use('element', function(){
  var $ = layui.jquery,
  element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
  };
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);
  
  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });
});
</script>
</body>
</html>